<template>
	<view class="body">
		  <view class="home-bg">
			  <view class="img-box">
			  	<image src='http://8.138.83.48:9000/library/museum/museum.jpg'  mode="widthFix"></image>
			  </view>
		  </view>
		
		<!-- 九宫格区域 -->
		<view class="grid-father">
		  <view class="grid-list" :style="{width: (ww - 20) + 'px'}">
		    <navigator class="grid-item" v-for="(item, i) in GridList" :key="i" :url="`{{item.url}}?title={{item.name}}`">
		      <image :src="item.image" ></image>
		      <text>{{item.name}}</text>
		    </navigator>
		  </view>
		</view>
		
		<!-- 新闻资讯 -->
		<view class="news-infos-box">
			<view class="news-info-list" v-for="(item, i) in newsInfoList" :key="i" @click="gotoDetail(item.newsNo)">
				<view class="news-images-box">
					<image :src="item.newsSmallImg" mode=""></image>
				</view>
				<view class="news-info-box">
					<view class="news-info-title">
						{{item.newsTitle}}
					</view>
					<view class="news-info-time">
						{{item.newsPublishTime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//设备属性
				sysInfo: {},
				wh: 0,
				ww: 0,
				GridList:[
				      {
				        image:"http://8.138.83.48:9000/library/museum/museum.png",
				        name:"展馆详情",
				        url:"/subpkg/museum/museum"
				      },
				      {
				        image:"http://8.138.83.48:9000/library/museum/date.png",
				        name:"预约",
				        url:"/subpkg/bookTickets/bookTickets"
				      },
				      {
				        image:"http://8.138.83.48:9000/library/museum/guide.png",
				        name:"服务指南",
				        url:"/subpkg/guide/guide"
				      },
				      {
				        image:"http://8.138.83.48:9000/library/museum/activity.png",
				        name:"文创展示",
				        url:"/subpkg/culturalProduct/culturalProduct"
				      },
				      // {
				      //   image:"http://8.138.83.48:9000/museum/icon/tickoff.png",
				      //   name:"打卡",
				      //   url:"/AllGridList/checkin/checkin"
				      // },
				      // {
				      //   image:"http://8.138.83.48:9000/museum/icon/OIP-C.jpg",
				      //   name:"前面的区域花了钱再来探索吧..",
				      //   url:""
				      // }
				],
				newsInfoList: [],
			// 	newsInfos: [
			// 		{
			// 			index: '1',
			// 			newsImages: "http://8.138.83.48:9000/library/news/news1.jpg",
			// 			newsInfoTitle: '羊城烟火气——广州出土汉代建筑模型明器展”720度全景云展览上线',
			// 			newsInfoTime: '2023-11-10',
			// 			content: {
			// 				text: {
			// 					p1: '羊城烟火气——广州出土汉代建筑模型明器展”于2023年3月29日至2023年11月19日在南汉二陵博物馆特展厅Ⅰ展出。为拓展展览的传播广度和深度，我院（馆）借助信息化、网络化手段，对线下展览进行资源数字化采集和再加工，对部分文物添加了图片、文字、音频的详细讲解，动动手指即可通过手机移动端、电脑网页端尽览展览风采，获得亲临现场般的沉浸式体验。',
			// 					p2: '本次展览是广州市文物部门学习贯彻党的二十大精神，贯彻落实习近平总书记关于加强考古研究和考古成果传播重要指示批示精神的重要实际行动，也是庆祝广州考古七十周年系列活动的重要内容。',
			// 					p3: '1953年以来的70年，广州考古发现了数量丰富、类型多样的汉代建筑模型明器，为我们部分重构汉代番禺先民生活图景提供了丰富、形象而立体的实物材料。本次展览共展出广州考古出土汉代建筑模型明器169件/套，这是历年来广州汉代建筑模型明器集中展示数量最多的一次，相当一部分展品是首次公开展出，还有一些是最新考古发现的成果。',
			// 					p4: '展览除前言、结语外，分“美家园”、“安其居”、“饮不竭”、“甘其味”和“仓廪实”五个部分，分别对应明器组合、屋、井、灶、仓（囷）。透过这些生动形象的陶屋、井、灶、仓、船、车等模型明器，我们得以窥见汉代番禺先民的生活场景烟火气，领略先民们的艺术审美情趣，感受先民们对美好生活的持续向往。',
			// 					p5: '烟火气是生活的真谛。广州出土汉代建筑模型明器，不仅是汉代番禺都市繁华的重要见证、浓郁烟火气息的生动缩影,而且已经深深融入广府文化，融入名城广州，成为新老广州人日用而不觉的文化特质和乡愁记忆。今天的广州被公认为是一座烟火气十足的大都市。可以说，烟火气已经成为广州一个重要文化符号、一项重要软实力。',
			// 					p6: '2023年“5·18国际博物馆日”的主题是“博物馆、可持续性与美好生活”，本展览既展出精美的出土文物，又通过辅助展线更近距离的信息海报、音频讲解及可供触摸的文物模型、互动活动等形式，很好地诠释了2023年“5·18国际博物馆日”重点关注目标3“良好健康与福祉，是确保健康的生活方式，促进各年龄段人群的福祉，特别关注心理健康和社交隔阂问题。”',
			// 					p7: '更多精彩内容等您来探索发现，扫描二维码即可观展。',
			// 					p8: '温馨提示：“羊城烟火气——广州出土汉代建筑模型明器展”将于11月20日撤展。想来现场观展的朋友们，请抓紧时间哦。'
								
			// 				},
			// 				imgList: {
			// 					img1: 'http://8.138.83.48:9000/library/news/news1/img1.jpg',
			// 					img2: 'http://8.138.83.48:9000/library/news/news1/img2.png',
			// 					img3: 'http://8.138.83.48:9000/library/news/news1/img3.png',
			// 					img4: 'http://8.138.83.48:9000/library/news/news1/img4.png',
			// 					img5: 'http://8.138.83.48:9000/library/news/news1/img5.png',
			// 					img6: 'http://8.138.83.48:9000/library/news/news1/img6.png',
			// 				}
			// 			}
			// 		},
			// 		{
			// 			index: '2',
			// 			newsImages: "http://8.138.83.48:9000/library/news/news2.png",
			// 			newsInfoTitle: '“寻迹羊城——2022年广州考古新发现”720度全景云展览上线',
			// 			newsInfoTime: '2023-11-09',
			// 			content: {
			// 				text: {
			// 					p1: '寻迹羊城——2022年广州考古新发现”展览于2023年4月25日开幕，目前正在南汉二陵博物馆特展厅Ⅱ展出，展览临近尾声，但数字展厅“永不落幕！我院（馆）借助信息化、数字化手段，对线下展览进行资源数字化采集和再加工，于即日起正式推出“寻迹羊城——2022年广州考古新发现”720度全景云展览。足不出户、动动手指，即可实现观展自由！',
			// 					p2: '该展览从2022年广州18宗考古发掘项目的新成果中精选陶器、铜器、铁器、银器、水晶、贝壳等各类出土文物约260件/套进行展示，分为居住、劳作、埋葬三部分。',
			// 					p3: '展览强化考古发现与当下生活的关系，通过现代人要面对的日常事物联系考古遗存所能呈现的古代先民生活起居、劳作营生、宗教活动和生死观念。观众可从自身熟悉的视角认识这些遗迹遗物，观察和体会广州先民的生活日常、生命日常，与生活在同一片区域的先民对话。',
			// 					p4: '为促进观众参与展览，以直观的方式传达知识信息，展厅还设置文物触摸体验、磨制石器、铜铙古乐传声、考古漂流瓶等互动，观众可参与众筹共同制作一件石器、通过考古漂流瓶与其他观众隔空互动。',
			// 					p5: '手机端与电脑端已同步上线，扫描二维码即可发现更多精彩内容！',
			// 					p6: '此外，逢周末下午2:30，我院（馆）都将为观众朋友提供“寻迹羊城——2022年广州考古新发现”展览导赏，欢迎大家前来观展！',
			// 				},
			// 				imgList: {
			// 					img1: 'http://8.138.83.48:9000/library/news/news2/img1.png',
			// 					img2: 'http://8.138.83.48:9000/library/news/news2/img2.png',
			// 					img3: 'http://8.138.83.48:9000/library/news/news2/img3.png',
			// 					img4: 'http://8.138.83.48:9000/library/news/news2/img4.png',
			// 					img5: 'http://8.138.83.48:9000/library/news/news2/img5.png',
			// 					img6: 'http://8.138.83.48:9000/library/news/news2/img6.png',
			// 					img7: 'http://8.138.83.48:9000/library/news/news2/img7.png',
			// 					img8: 'http://8.138.83.48:9000/library/news/news2/img8.png',
			// 					img9: 'http://8.138.83.48:9000/library/news/news2/img9.png',
			// 					img10: 'http://8.138.83.48:9000/library/news/news2/img10.png',
			// 					img11: 'http://8.138.83.48:9000/library/news/news2/img11.png',
			// 				}
			// 			}
			// 		},
			// 		{
			// 			index: '3',
			// 			newsImages: "http://8.138.83.48:9000/library/news/news3.png",
			// 			newsInfoTitle: '今日立冬！',
			// 			newsInfoTime: '2023-11-08',
			// 			content: {
			// 				text: {
			// 					p1: '海报设计：何春颖',
			// 					p2: '素材提供：胡晓宇'
			// 				},
			// 				imgList: {
			// 					img1: 'http://8.138.83.48:9000/library/news/news3/img1.jpg',		
			// 				}
			// 			}
			// 		}
			// 	]	
			
			};
		},
		methods: {
			//设置屏幕高度
			setSysInfo() {
				const sysInfo = uni.getSystemInfoSync()
				this.sysInfo = sysInfo
				this.wh = sysInfo.windowHeight 
				this.ww = sysInfo.windowWidth 
			},
			//得到新闻列表的简单信息
			async getNewsInfoList() {
				const {data: res} = await uni.$http.get('/news/listsmall')
				// console.log('newsdata: ', res)
				if(res.msg !== 'success') return uni.$showMsg('查询新闻列表失败')
				this.newsInfoList = res.list
				// console.log("this.newsInfoList: ", this.newsInfoList)
			},
			//新闻列表的跳转
			gotoDetail(item) {
				uni.navigateTo({
					url: '/subpkg/newsDetail/newsDetail?newsNo=' + item
				})
			}
		},
		onLoad() {
			this.setSysInfo()
			this.getNewsInfoList()
		}
	}
</script>

<style lang="scss">
.body {
	// background-Color: white;
	/* 首页图片样式 */
	.home-bg {
		height: 200px;
		// border: 1px solid blue;
		margin-bottom: 40px;	
		.img-box {
			image {
				width: 375px;
				// width: 100%;
				// height: 100%;
				// position: fixed;
				// background-size: 100% 100%;
				// z-index: -1;
			}
		}
		
	 
	}
	
	/* 九宫格样式 */
	.grid-father{
	  display: flex;
	  justify-content: center;
	  // margin-top: 50px;
	  .grid-list{
	    // width: 650rpx;
		// width: 350px;
	    // margin-top: 550rpx;
	    display: flex;
	    flex-wrap: wrap;
		
		.grid-item{
		  background-color: white;
		  width: 50%;
		  height: 200rpx;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  border-right: 9rpx solid #efefef;
		  border-bottom: 9rpx solid #efefef;
		  box-sizing: border-box;
		  border-radius: 10px;
		 
		  image{
		    width: 80rpx;
		    height: 75rpx;
		  }
		  text{
		    color: #5e5e5e;
		    font-size: 30rpx;
		    margin-top: 20rpx;
		  }
		}
		
	  }
	}

	// 新闻资讯样式
	.news-infos-box {
		margin: 10px 5px;
		.news-info-list {
			display: flex;
			margin: 5px 5px;
			background-color: white;
			font-size: 15px;
			// height: 100px;
			.news-images-box {
				image {
					height: 80px;
					width: 80px;
					border-radius: 10%;
				}
			}
			.news-info-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 10px;
				.news-info-title {
					
				}
				.news-info-time {
					color: #5e5e5e;
				}
			}
		}
	}
}

 
</style>
